<template>
  <section class="container">
    <div class="brand-show">
      <div class="top-title" :title="$t('brand.topTitle')">{{ $t('brand.topTitle') }}</div>
      <div class="options-outer-box">
        <div class="options-box">
          <template v-for="option in brandTemp.optionList"
                    :key="option.id">
            <div class="option-item"
                 :class="{'activity-css': option.isActive}"
                 :title="$t(option.title)"
                 @click="brandTemp.getBrands(option.id)">
                 {{ $t(option.title) }}
            </div>
          </template>
        </div>
      </div>
      <div class="img-container">
          <template v-for="(brand,index) in brandTemp.brandServerData" :key="index">
            <div class="img-item">
              <img :src="`${brandTemp.preFix}`+brand.logo" alt="">
            </div>
          </template>
      </div>
    </div>
  </section>
  <button @click="CHINA" style="margin-right: 20Px">中文</button>
  <button @click="EN"> 英文</button>
</template>

<script lang="ts">
  import {defineComponent, onMounted, reactive} from 'vue';
  import { getApp } from '@/common/hooks';
  import { Language } from '@/common/lang';

  export default defineComponent({
    name: "brands",
    components: {
    },
    data() {
      return {

      }
    },
    setup() {
      const { proxy } = getApp(["Vm"]).Vm;

      const brandTemp = reactive({
        preFix: (import.meta as any).env.VITE_API_AXIOS,
        brandServerData: [],
        optionList: [
          {
            id: 1,
            title: 'brand.designBranding',
            isActive: true
          },
          {
            id: 2,
            title: 'brand.tierOneBrand',
            isActive: false
          },
          {
            id: 3,
            title: 'brand.athleticBranding',
            isActive: false
          },
          {
            id: 4,
            title: 'brand.trendyBrands',
            isActive: false
          }
        ],
        getBrands: async function (type: any) {
          brandTemp.optionList.map(item => {
            item.isActive = false
          });
          brandTemp.optionList[type - 1].isActive = true;
          await getApp().System.Brand?.getBrandData(type).then(res => {
            brandTemp.brandServerData = res.rows
          });
        }
      });

      onMounted(()=> {
        getApp().System.Brand?.getBrandData(1).then(res => {
          brandTemp.brandServerData = res.rows
        });
      });

      const CHINA = () => {
        proxy.$i18n.locale = Language.xiaomao;
      }

      const EN = () => {
        proxy.$i18n.locale = Language.xiaomaoen;
      }

      return {
        CHINA,
        EN,
        brandTemp
      }
    }
  });
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 80Px;
  .brand-show {
    width: 1480Px;
    .top-title {
      width: 100%;
      height: 124Px;
      text-align: center;
      line-height: 124Px;
      font-style: normal;
      font-size: 26Px;
      font-weight: 400;
    }
    .options-outer-box {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-bottom: 58Px;
      .options-box {
        display: flex;
        justify-content: space-between;
        //width: 406Px;
        height: 28Px;
        .option-item {
          //flex: 0 1 64Px;
          margin-right: 15Px;
          height: 28Px;
          line-height: 28Px; //24
          text-align: center;
          color: #999;
          font-style: normal;
          font-weight: 400;
          font-size: 16Px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
    .img-container {
      display: grid;
      grid-template-columns: repeat(3, 460Px);
      grid-column-gap: 50Px;
      grid-row-gap: 30Px;
      margin-bottom: 100Px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.activity-css {
  color: #222 !important;
  border-bottom: 2Px solid #222;
}
</style>
